<template>
	<view class="my">
		<!-- 登录注册按钮 -->
		<view class="my_top">
			<view class="top_text"><span>我的租车</span></view>
			<view class="top_btn" v-if="!USERSTATUS"><tm-button :round="10" bgcolor="#74bfc2" dense @click='doLogin()'>登录/注册</tm-button></view>
			<view class="top_vip" v-else>
				<view class="top_vip_avatar" @click="toMyCount()">
					<tm-avatar :src='avatar'  size='120'></tm-avatar>
				</view>
				<view class="top_vip_text">
					<view >
						1594058210@qq.com
					</view>
					<view >
						<tm-button size='s' bgcolor='#88bfb8' round='10'>普卡会员></tm-button>
					</view>
				</view>
				<view class="top_vip_score">
					赚积分
				</view>
			</view>
		</view>
		<!-- 我的钱包 -->
		<view class="my_account" @click="dotest" >
			<view class="account_text">我的钱包</view>
			<view class="account_icon">
				<tm-scroll width="650" color="blue"><tm-grid :list="list"></tm-grid></tm-scroll>
			</view>
		</view>
		<!-- 阿力服务 -->
		<view class="my_service">
			<view class="service_text">阿力服务</view>
			<view class="service_icon"><tm-grid @change="change" color="blue" :list="list2"></tm-grid></view>
		</view>
		<view class="my_list">
			<tm-grouplist><tm-listitem v-for="(item, index) in list3" :title="item.text" :key="index" :left-icon="item.icon" show-left-icon @click='changeDo(item.path)'></tm-listitem></tm-grouplist>
		</view>
		<view class="my_bottom">
			<span>客服热线:</span>
			888-888-3553
		</view>
		<tm-message ref="toast"></tm-message>
	</view>
</template>

<script>
export default {
	onShow() {
		this.USERSTATUS = uni.getStorageSync('USERSTATUS') ||false
	},
	data() {
		return {
			title: 'Hello',
			avatar:require('@/static/images/avatar.png'),
			USERSTATUS:uni.getStorageSync('USERSTATUS') || false,
			list: [
				{ icon: '/static/images/yue.png', text: '余额' },
				{ icon: '/static/images/jf.png', text: '积分' },
				{ icon: '/static/images/yhj.png', text: '优惠卷' },
				{ icon: '/static/images/djj.png', text: '代金卷' },
				{ icon: '/static/images/xyk.png', text: '信用卡' }
			],
			list2: [{ icon: '/static/images/kpgl.png', text: '开票管理' }, { icon: '/static/images/wzcx.png', text: '违章查询' }],
			list3: [
				{ icon: '/static/images/dd.png', text: '自驾订单', path: '' },
				{ icon: '/static/images/sz.png', text: '租车免押方式', path: '' },
				{ icon: '/static/images/ren.png', text: '常用租车人', path: '/pages/rentalpeople/rentalpeople' },
				{ icon: '/static/images/wx.png', text: '绑定公众号', path: '' },
				{ icon: '/static/images/xx.png', text: '常用收件信息', path: '' }
			]
		};
	},
	onLoad() {
		//
	},
	methods: {
		async dotest(){
			const Rres = await  this.$wxRequest({
				url:'/al/jstoken',
				method:'POST',
				data:{
					
				}
			})
		},
		toMyCount(){
			uni.navigateTo({
				url:'/pages/mycount/mycount'
			})
		},
		showErr(type,text,time=1500){
			this.$refs.toast.show({model:type,mask:false,label:text,wait:time})
		},
		change() {},
		// 验证是否注册
		async checkregister(appid){
			const Rres = await  this.$wxRequest({
				url:'/wx/isregister',
				method:'POST',
				data:{
					appid
				}
			})
		if(Rres.data.code ==204){
			// 未注册，跳转注册界面
			uni.navigateTo({
				url:'/pages/register/register'
			})
		}else if(Rres.data.code == 200){
			// 已注册，直接跳转登录界面
			uni.navigateTo({
				url:'/pages/login/login'
			})
		}
		},
		// 点击登录获取用户的数据 以及session_key 和 openid
		doLogin() {
			let that = this;
			uni.showLoading({
				title:'登录中..',
				mask:true
			})
			uni.getUserProfile({
				desc: '获取用户基本资料',
				success: res => {
					// console.log('获取用户资料', res);
					uni.login({
						provider: 'weixin',
						onlyAuthorize: true,
						success: res => {
							if (res.code) {
								uni.request({
									url: 'http://localhost:3050/wx/wxlogin',
									header: {
										'content-type':'application/x-www-form-urlencoded'
									},
									data: {
										code: res.code
									},
									method: 'POST',
									success(resOpenId) {
										if (resOpenId.data.code > 0) {
											uni.hideLoading()
											uni.setStorageSync('openid',resOpenId.data.data.openid)
											uni.setStorageSync('session_key',resOpenId.data.data.session_key)
											// that.showErr('success','登录成功')
											that.checkregister(resOpenId.data.data.openid)
											// console.log('code返回数据', resOpenId);
										} else {
											uni.hideLoading()
											that.showErr('error','获取openid失败')
										}
									},
									fail(resOpenId) {
										uni.hideLoading()
										//提示错误
										that.showErr('error','登录失败')
									}
								});
							} else {
								//提示错误''
								that.showErr('error','登录失败')
							}
						}
					});
				},
				fail: res => {
					//提示错误
					uni.hideLoading()
					that.showErr('error','登录失败')
				}
			});
		},
		changeDo(path){
			console.log('111',path)
			uni.navigateTo({
				url:path
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.my {
	width: 100%;
	.my_top {
		width: 100%;
		height: 400rpx;
		background-image: linear-gradient(0deg, #90f7ec, #32ccbc);
		.top_text {
			height: 60%;
			line-height: 250rpx;
			text-align: center;
			font-size: 600;
			color: #ffffff;
		}
		.top_btn {
			height: 40%;
			text-align: center;
		}
		.top_vip_avatar{
			margin: 0 30rpx;
		}
		.top_vip{
			display: flex;
			align-items: center;
		.top_vip_text{
			color: #ffffff;
			line-height: 60rpx;
			margin: 0 20rpx;
			width: 70%;
		}
		}
		.top_vip_score{
			width: 100rpx;
			background-color: #ff8f00;
			height: 100%;
			text-align: center;
			color: #ffffff;
			font-size: 24rpx;
			padding: 10rpx;
			border-top-left-radius:40rpx;
			border-bottom-left-radius:40rpx;
		}
	}
	.my_account {
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		width: 95%;
		margin: auto;
		height: 100%;
		background-color: #ffffff;
		border-radius: $uni-border-radius-sm * 6;
		margin-top: $uni-spacing-row-base;
		margin-bottom: $uni-spacing-row-base;
		.account_text {
			padding: 10rpx;
			font-size: $uni-font-size-lg;
			font-weight: 600;
		}
	}
	.my_service {
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		width: 95%;
		margin: auto;
		height: 100%;
		background-color: #ffffff;
		border-radius: $uni-border-radius-sm * 6;
		margin-top: $uni-spacing-row-base;
		margin-bottom: $uni-spacing-row-base;
		.service_text {
			padding: 10rpx;
			font-size: $uni-font-size-lg;
			font-weight: 600;
		}
	}
	.my_list {
	}
	.my_bottom {
		margin: 20rpx 0;
		font-size: $uni-font-size-sm;
		text-align: center;
		color: #5bb3b5;
		span {
			color: #8c8c8c;
		}
	}
}
</style>
